<template>

  <div class="container">


    <div class="card mt-3">
      <div class="card-header">
        捐赠记录列表
      </div>
      <div class="card-header">
        <span>搜索 </span>
        <select v-model="conditionSelect" class="form-select d-inline-block select_box"
                aria-label="Default select example">
          <option value="id">ID</option>
          <option value="name">名字</option>
          <option value="note">留言</option>
          <option value="money">金额</option>
        </select>

        <template v-if='conditionSelect === "id"'>
          <input v-model="form.id" type="text" class="form-control d-inline-block  search" placeholder="根据ID搜索内容">
        </template>
        <template v-if='conditionSelect === "name"'>
          <input v-model="form.name" type="text" class="form-control d-inline-block  search"
                 placeholder="根据捐赠者搜索内容">
        </template>
        <template v-if='conditionSelect === "note"'>
          <input v-model="form.note" type="text" class="form-control d-inline-block  search"
                 placeholder="根据留言搜索内容">
        </template>
        <template v-if='conditionSelect === "money"'>
          <input v-model="form.money" type="text" class="form-control d-inline-block  search"
                 placeholder="根据金额搜索内容">
        </template>


        <select v-model="form.status" class="form-select d-inline-block  payment" aria-label="Default select example">
          <option :value="null">状态</option>
          <option value="1">捐赠成功</option>
          <option value="0">捐赠失败</option>
        </select>


        <div class="block d-inline-block ">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="pickerOptions2.value5"
            type="datetimerange"
            :picker-options="pickerOptions2"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="height: 38px"
            @change="typedTime"
          >
          </el-date-picker>
        </div>
        <button @click="getPage" type="button" class="btn btn-primary button_box">搜索</button>
        <button @click="getPage" type="button" class="btn btn-primary button_box">
          <el-icon style="width: 1em; height: 1em; margin-top: 4px">
            <Refresh />
          </el-icon>
        </button>
        <button @click="clearNoPaid" type="button" class="btn btn-danger button_box">
          <el-icon style="width: 1em; height: 1em; margin-top: 4px">
            <Delete />
          </el-icon>
        </button>
      </div>
    </div>

    <div class="card mt-1">
      <el-table :data="pageInfo.page" style="width: 100%">
        <el-table-column prop="id" label="#" width="100" />
        <el-table-column prop="tradeNo" label="订单号" width="255" />
        <el-table-column prop="name" label="捐赠者" width="100" />
        <el-table-column prop="note" label="留言" width="255" />
        <el-table-column prop="money" label="金额" width="100" />
        <el-table-column prop="status" label="状态" width="150">
          <template #default="scope">
            <el-tag :type='scope.row.status === 0 ? "danger": "success"'>
              {{ scope.row.status === 0 ? '捐赠失败' : '捐赠成功' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="时间" width="200" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>


      <el-pagination @current-change="getPage" background layout="prev, pager, next" :total="pageInfo.total"
                     :page-size="pageInfo.size"
                     v-model:current-page="pageInfo.currentPage" />

    </div>

  </div>
</template>

<script>
import request from '@/http/request'
import {ElMessage, ElMessageBox} from 'element-plus'
import functions from '@/utils/functions'

export default {

  name: 'Donation',
  data() {
    return {
      pageInfo: {
        currentPage: 1,
        page: [],
        size: 10,
        total: 0,
      },

      types: [],
      conditionSelect: 'id',
      form: {
        id: null,
        tradeNo: null,
        name: null,
        note: null,
        money: null,
        status: null,
        startTime: null,
        endTime: null,
      },
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
        value5: [],
      },
    }
  },

  methods: {
    typedTime() {
      this.form.startTime = functions.formatDate(this.pickerOptions2.value5[0])
      this.form.endTime = functions.formatDate(this.pickerOptions2.value5[1])
    },
    getPage() {
      request.getAdminDonationPage(this.pageInfo.currentPage, this.pageInfo.size, this.form).then(
        response => {
          this.pageInfo.page = response.data.result.page.records
          this.pageInfo.total = response.data.result.page.total

        },
      )
    },
    clearNoPaid() {
      ElMessageBox.confirm('确定清除未支付的订单吗?', '警告', {
        cancelButtonText: '算了',
        confirmButtonText: '确定',
        type: 'error',
      }).then(() => {
        request.clearNoPaid().then(response => {
          this.getPage()
          ElMessage.success(`清理掉${response.data.result.count}条数据`)
        })
      })
    },

    handleDelete(index, row) {
      ElMessageBox.confirm('确定要删除吗?', '警告', {
        cancelButtonText: '算了',
        confirmButtonText: '确定',
        type: 'error',
      }).then(() => {
        console.log(row.id)
        request.deleteDonationById(row.id).then(response => {
          this.getPage()
          ElMessage.success('删除成功')
        }).catch(error => {
          console.log(error)
          ElMessage.error('删除失败')
        })
      })
    },
  },

  mounted() {
    this.getPage()
  },
}


</script>

<style scoped>
.select_box {
  width: 100px;
  margin: 0 10px;
}

.search {
  width: 200px;
  margin: 0 10px;
}

.payment {
  width: 150px;
  margin: 0 10px;
}

.button_box {
  height: 38px;
  margin: 0 10px 5px;
}

</style>


